<#include "/main.ftl">
<@diamondNav/>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            仪表盘
        <#--<small>Control panel</small>-->
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">仪表盘</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>${metric.interfaceSize!}</h3>
                        <p>接口数量</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-bag"></i>
                    </div>
                    <a href="#" class="small-box-footer">详细 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>${metric.caseSize!}
                        <#--<sup style="font-size: 20px">%</sup>-->
                        </h3>

                        <p>测试用例</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-stats-bars"></i>
                    </div>
                    <a href="#" class="small-box-footer">详细 <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>${metric.userSize!}</h3>

                        <p>用户量</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-person-add"></i>
                    </div>
                    <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>${metric.buildSize!}</h3>

                        <p>构建次数</p>
                    </div>
                    <div class="icon">
                        <i class="ion ion-pie-graph"></i>
                    </div>
                    <a href="#" class="small-box-footer">More info <i class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
        </div>
        <!-- /.row -->
        <!-- Main row -->
        <div class="row">
            <!-- Left col -->
            <section class="col-lg-7 connectedSortable">
                <!-- Custom tabs (Charts with tabs)-->
                <div class="nav-tabs-custom">
                    <!-- Tabs within a box -->
                    <ul class="nav nav-tabs pull-right">
                        <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
                        <li class="pull-left header"><i class="fa fa-inbox"></i>构建用例通过率趋势表</li>
                    </ul>
                    <div class="tab-content no-padding">
                        <!-- Morris chart - Sales -->
                        <div class="chart tab-pane active" id="revenue-chart"
                             style="position: relative; height: 300px;"></div>
                        <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
                    </div>
                </div>
                <!-- /.nav-tabs-custom -->
                <div class="pull-right hidden-xs">
                    <b>Version</b> 2.4.0
                </div>
                <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">金刚石接口测试平台</a>.</strong> All rights
                reserved.
            </section>
            <!-- /.Left col -->
            <!-- right col (We are only adding the ID to make the widgets sortable)-->
            <section class="col-lg-5 connectedSortable">
                <!-- solid sales graph -->
                <div class="box box-solid bg-teal-gradient">
                    <div class="box-header">
                        <i class="fa fa-th"></i>

                        <h3 class="box-title">构建次数趋势图</h3>

                        <div class="box-tools pull-right">
                            <button type="button" class="btn bg-teal btn-sm" data-widget="collapse"><i
                                    class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn bg-teal btn-sm" data-widget="remove"><i
                                    class="fa fa-times"></i>
                            </button>
                        </div>
                    </div>
                    <div class="box-body border-radius-none">
                        <div class="chart" id="build-chart" style="height: 250px;"></div>
                    </div>
                </div>
                <!-- /.box -->
            </section>
            <!-- right col -->
        </div>
        <!-- /.row (main row) -->

    </section>
    <!-- /.content -->
</div>

    <!-- Morris chart -->
    <link rel="stylesheet" href="${base}/lib/adminLte-2.4.5/morris.js/morris.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="${base}/lib/adminLte-2.4.5/jvectormap/jquery-jvectormap.css">
    <!-- Date Picker -->
    <link rel="stylesheet" href="${base}/lib/adminLte-2.4.5/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
    <!-- Daterange picker -->
    <link rel="stylesheet" href="${base}/lib/adminLte-2.4.5/bootstrap-daterangepicker/daterangepicker.css">
    <!-- bootstrap wysihtml5 - text editor -->
    <link rel="stylesheet" href="${base}/lib/adminLte-2.4.5/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<#--<link rel="stylesheet"-->
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<!-- Morris.js charts -->
<script src="${base}/lib/adminLte-2.4.5/raphael/raphael.min.js"></script>
<script src="${base}/lib/adminLte-2.4.5/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<script src="${base}/lib/adminLte-2.4.5/jquery-sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="${base}/lib/adminLte-2.4.5/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="${base}/lib/adminLte-2.4.5/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="${base}/lib/adminLte-2.4.5/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="${base}/lib/adminLte-2.4.5/moment/moment.min.js"></script>
<script src="${base}/lib/adminLte-2.4.5/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="${base}/lib/adminLte-2.4.5/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="${base}/lib/adminLte-2.4.5/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="${base}/lib/adminLte-2.4.5/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="${base}/lib/adminLte-2.4.5/fastclick/fastclick.js"></script>

<script>

    $(document).ready(function () {
        buildTestRunMetric();
        buildTrend();
    });

    function buildTrend() {
        var data=[];
        <#if buildTrend??>
            <#list buildTrend as item>
                        var obj={};
                        obj.day ="${item.startTime?date('yyyy-MM-dd')}";
                        obj.buildNum = ${item.buildNum};
                        data.push(obj);
            </#list>
        </#if>
        /**
         * 构建趋势图
         * **/
        var line = new Morris.Line({
            element: 'build-chart',
            data: data,
            xkey: 'day',
            ykeys: ['buildNum'],
            labels: ['构建次数'],
            lineColors: ['#617eef'],
            lineWidth: 2,
            hideHover: 'auto',
            gridTextColor: '#fff',
            gridStrokeWidth: 0.4,
            pointSize: 4,
            pointStrokeColors: ['#efefef'],
            gridLineColor: '#efefef',
            gridTextFamily: 'Open Sans',
            gridTextSize: 10
        });
    }
    /**
    * 构建用例通过率趋势表
    * */
    function buildTestRunMetric() {
        /* Morris.js Charts */
        // Sales chart
        var data =[];
         <#if buildTestList??>
             <#list buildTestList as item>
                var obj={};
                obj.day ="${item.startTime?date('yyyy-MM-dd')}";
                obj.caseSize = ${item.caseSize};
                obj.passCaseSize =${item.passCaseSize!};
                obj.passRate = "${item.passCaseRate!}";
                data.push(obj);
             </#list>
         </#if>
        var area = new Morris.Area({
            /**element就是标签的id**/
            element: 'revenue-chart',
            data: data,
            xkey: 'day',
            ykeys: ['caseSize', 'passCaseSize'],
            labels: ['执行用例数量', '通过用例数量'],
            lineColors: ['#a0d0e0', '#3c8dbc'],
            hideHover: 'auto'
        });
    }
</script>